@charset "utf-8";
$c-green: #a8ce3b;
%box-shadow{
    box-shadow: 3px 3px 6px #999, -3px -3px 6px #999, 3px -3px 6px #999,-3px 3px 6px #999;
}
/*flex*/
%flex-parent{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

%flex-child{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.shop{
    background-color: #fff;
    margin-bottom: 50px;
    .search{
        height: 54px;
        background: url("../img/logo2.jpg") 10px top;
        background-repeat: no-repeat;
        background-color: #a8ce3b;
        background-size: 54px 54px;
        padding: 0 10px;
        div{
            &:before{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 28px;
                height: 28px;
                z-index: 1;
                background-image: url("");
                background-size: 100%;
            }
            position: absolute;
            width: 240px;
            top: 12px;
            right: 10px;
            input{
                font-size: 14px;
                height: 28px;
                border-radius: 5px 0 0 5px;
                position: absolute;
                left: 0;
                top: 0;
                width: 150px;
                padding-left: 30px;

            }
            span{
                font-size: 14px;
                height: 28px;
                width: 60px;
                display: inline-block;
                background-color: rgba(0,0,0,.4);
                color: #fff;
                right: 0;
                top: 0;
                border-radius: 0 5px 5px 0;
                position: absolute;
                text-align: center;
                line-height: 28px;
            }
        }
    }
    .slide{
        height: 170px;
        overflow: hidden;
        position: relative;
        width: 100%;
        will-change: transform;
        li{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            will-change: transform;
            -webkit-transition: transform .3s;
            transition: transform .3s;
            img{
                height: 100%;
                display: block;
            }
            &:nth-of-type(2){
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            &:nth-of-type(3){
                -webkit-transform: translateX(200%);
                transform: translateX(200%);
            }
        }

        .dot{
            overflow: hidden;
            width: 42px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -21px;
            li{
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background-color: rgba(148,135,122,1);
                float: left;
                margin: 0 2px;
            }
            .current{
                background-color: rgba(255,255,255,1);
            }
        }
    }

    .nav2{
        background-color: $c-green;
        margin: 10px 0;
        position: relative;
        padding: 0 15px 0 95px;
        height: 36px;
        .p1{
            width: 62px;
            height: 40px;
            background-color: #fff;
            border-radius: 5px;
            @extend %box-shadow;
            position: absolute;
            left: 15px;
            top: -2px;
            img{
                width: 62px;
                height: 40px;
            }
        }
        .p2{
            color: #fff;
            em{
                color: red;
            }
        }
    }

    .title{
        @extend %flex-parent;
        li{
            @extend %flex-child;
            color: $c-green;
            position: relative;
            text-align: center;
            padding: 10px 0 20px 0;
            &:before{
                content: '';
                position: absolute;
                background-size: 100%;
                width: 25px;
                height: 22px;
                margin-left: -14px;
            }
            &:nth-of-type(1){
                &:before{
                    background-image: url("");
                }
            }
            &:nth-of-type(2){
                &:before{
                    height: 20px;
                    background-image: url("");
                }
            }
            &:nth-of-type(3){
                &:before{
                    background-image: url("");
                }
            }
        }
    }

    .goods{
        overflow: hidden;
        width: 320px;
        margin: 0 auto;
        li{
            @extend %box-shadow;
            width: 90px;
            height: 86px;
            border-radius: 5px;
            float: left;
            margin: 8px;
            img{
                width: 90px;
                height: 86px;
            }
        }
    }

    .bg{
        width: 100%;
        height: 140px;
        background: #fff url('../img/shopbg.jpg') center center no-repeat;
        background-size: auto 100%;
    }

    .tab{
        font-size: 16px;
        color: #fff;
        background-color: $c-green;
        text-align: center;
        padding: 8px 0;
    }
    .bg2{
        width: 100%;
        height: 200px;
        background: #fff url('../img/shopbg2.jpg') center center no-repeat;
        background-size: auto 100%;
    }
    .bg3{
        width: 100%;
        height: 160px;
        background: #fff url('../img/shopbg3.jpg') center center no-repeat;
        background-size: auto 100%;
    }
}
.bottom.bottom2{
    li{
        &:before{
                width: 25px;
                height: 20px;
                display: inline-block;
        }
        &:nth-of-type(1){
            &:before{
                background-image: url("");
            }
        }
        &:nth-of-type(2){
            &:before{
                background-image: url("");
            }
        }
        &:nth-of-type(3){
            &:before{
                background-image: url("");
            }
        }
        &:nth-of-type(4){
            &:before{
                background-image: url("");
            }
        }
    }
}